<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户关系树</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        .user-tree-container {
            padding: 20px;
            background: #f8f9fa;
            min-height: 500px;
        }

        .tree-item {
            margin-bottom: 8px;
            position: relative;
        }

        .tree-item-content {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            padding: 16px;
            display: flex;
            align-items: center;
        }

        .tree-item-content:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            transform: translateY(-1px);
        }

        .tree-toggle {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            margin-right: 12px;
            color: #666;
        }

        .tree-toggle:hover {
            background-color: #f0f0f0;
        }

        .tree-toggle-placeholder {
            width: 24px;
            margin-right: 12px;
            display: inline-block;
        }

        .user-avatar {
            width: 48px;
            height: 48px;
            margin-right: 16px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
        }

        .user-details {
            flex: 1;
        }

        .user-name {
            margin-bottom: 8px;
        }

        .nickname {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-right: 8px;
        }

        .username {
            font-size: 14px;
            color: #666;
            margin-right: 8px;
        }

        .user-id {
            font-size: 12px;
            color: #999;
            background: #f5f5f5;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .user-stats {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .user-stats .badge {
            font-size: 12px;
            padding: 4px 8px;
        }

        .status-normal {
            background-color: #d4edda;
            color: #155724;
        }

        .status-disabled {
            background-color: #f8d7da;
            color: #721c24;
        }

        .user-actions {
            margin-left: 16px;
        }

        .tree-children {
            margin-left: 20px;
            border-left: 2px solid #e5e7eb;
            padding-left: 20px;
            position: relative;
            display: none;
        }

        .tree-children.show {
            display: block;
        }

        .tree-children::before {
            content: '';
            position: absolute;
            left: -1px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #e5e7eb 0%, transparent 100%);
        }

        .level-0 .tree-item-content {
            border-left: 4px solid #3b82f6;
        }

        .level-1 .tree-item-content {
            border-left: 4px solid #10b981;
        }

        .level-2 .tree-item-content {
            border-left: 4px solid #f59e0b;
        }

        .level-3 .tree-item-content {
            border-left: 4px solid #ef4444;
        }

        .level-4 .tree-item-content {
            border-left: 4px solid #8b5cf6;
        }

        .level-5 .tree-item-content {
            border-left: 4px solid #ec4899;
        }

        .panel-actions {
            float: right;
        }

        .panel-actions .btn {
            margin-left: 5px;
        }

        .panel-title small {
            color: #666;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-sitemap"></i> 用户关系树
                    <small>查看用户推荐关系层级结构</small>
                </h3>
                <div class="panel-actions">
                    <button class="btn btn-primary btn-sm" onclick="location.reload()">
                        <i class="fa fa-refresh"></i> 刷新
                    </button>
                    <button class="btn btn-info btn-sm" onclick="expandAll()">
                        <i class="fa fa-expand"></i> 展开全部
                    </button>
                    <button class="btn btn-warning btn-sm" onclick="collapseAll()">
                        <i class="fa fa-compress"></i> 收起全部
                    </button>
                </div>
            </div>
            <div class="panel-body">
                <div class="user-tree-container" id="treeContainer">
                    <div class="text-center">
                        <i class="fa fa-spinner fa-spin fa-2x"></i>
                        <p>加载中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            loadUserTree();
        });

        function loadUserTree() {
            $.ajax({
                url: '/CZWRciSTvL.php/shopro/user/user/userTree',
                type: 'GET',
                success: function(html) {
                    console.log('AJAX Success - 返回的HTML长度:', html.length);
                    console.log('AJAX Success - 返回的HTML内容:', html);
                    $('#treeContainer').html(html);
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', xhr.responseText);
                    console.error('Status:', status);
                    console.error('Error:', error);
                    $('#treeContainer').html('<div class="alert alert-danger">加载失败: ' + error + '<br>状态: ' + status + '<br>请检查控制台获取详细错误信息</div>');
                }
            });
        }

        function toggleNode(element) {
            const children = $(element).parent().find('.tree-children').first();
            const icon = $(element).find('i');
            
            if (children.length) {
                if (children.hasClass('show')) {
                    children.removeClass('show');
                    icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
                } else {
                    children.addClass('show');
                    icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
                }
            }
        }

        function expandAll() {
            $('.tree-children').addClass('show');
            $('.tree-toggle i').removeClass('fa-chevron-right').addClass('fa-chevron-down');
        }

        function collapseAll() {
            $('.tree-children').removeClass('show');
            $('.tree-toggle i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
        }

        function viewUserDetail(userId) {
            window.open('/CZWRciSTvL.php/shopro/user/user/detail?id=' + userId, '_blank');
        }
    </script>
</body>
</html>